<template>
	<view>
		<view class="top-Photo">
			<image src="../../static/me/1.jpg" mode=""></image>
		</view>
		<view class="Suspension-protrusion">
			<view class="avatar">
				<u-avatar :src="userInfo.avatar" size="130rpx"></u-avatar>
			</view>
			<view class="my-number">
				<view class="Stored-value">
					<text>我的储值</text>
					<text class="number">0</text>
				</view>
				<view class="Integral">
					<text>积分</text>
					<text class="number">0</text>
				</view>
				<view class="Coupons">
					<text>劵</text>
					<text class="number">2</text>
				</view>
			</view>
		</view>

		<view class="Of-I">
			<view class="Of-I-left" @click="myComments()">
				<view class="evaluation">
					<text>我的评论</text>
					<text class="S-T-L">评论领积分</text>
				</view>
			</view>
			<view class="Of-I-right" @click="improveTheData()">
				<view class="comLib">
					<text>完善资料</text>
					<text>获取更多会员资料</text>
				</view>
			</view>
		</view>
		<view class="recommend" @click="handleLogout">退出登录</text>
			<view class="Carousel">
				<u-swiper :list="list1" @click="click"></u-swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import { logout } from '@/common/http.api.js'
	export default {
		data() {
			return {
				list1: [
					'http://pic1.win4000.com/wallpaper/2019-07-03/5d1c738f68ddc.jpg',
					'https://lmg.jj20.com/up/allimg/1115/120R11I602/21120QI602-2-1200.jpg',
					'https://file06.16sucai.com/2016/0806/f7d6a9b5b441ea91abd1266678b21797.jpg',
				],
				src: '../../../static/img/5.jpg',
				userInfo: this.$store.state.userInfo
			}
		},
		methods: {
			myComments(){
				uni.navigateTo({
					url: `/pagesC/me/myComments/myComments`
				}) 
			},
			improveTheData(){
				uni.navigateTo({
					url: `/pagesC/me/improveTheData/improveTheData`
				})
			},
			handleLogout() {
				logout().then(() => {
					this.$store.commit('SET_USERID', '')
					uni.removeStorageSync('scan-userId')
					// // 从返回数据里拿到token 并存到仓库和缓存
					this.$store.commit('SET_TOKEN', '')
					uni.removeStorageSync('scan-token')
					this.$store.commit('SET_USERINFO', '')
					uni.removeStorageSync('scan-userinfo')
					uni.showToast({
						icon: 'none',
						title: '退出成功'
					})
					uni.switchTab({
						url: '/pages/home/home'
					})
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f4f4f5;
	}

	.top-Photo {
		width: 100%;
		height: 170rpx;
	}

	.top-Photo image {
		width: 100%;
		height: 300rpx;
	}

	.Suspension-protrusion {
		width: 90%;
		height: 270rpx;
		background-color: #fff;
		/* border: 1rpx solid #c4c6c9; */
		border-radius: 10rpx;
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	.Suspension-protrusion .avatar {
		height: 130rpx;
		width: 130rpx;
		/* background-color: #fff; */
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		top: -65rpx;
	}

	.Suspension-protrusion .my-number {
		width: 100%;
		height: 140rpx;
		/* background-color: darksalmon; */
		position: absolute;
		bottom: 0;
		display: flex;
		justify-content: space-around;
	}

	.Suspension-protrusion .my-number text {
		display: block;
		font-size: 25rpx;
		text-align: center;
	}

	.Suspension-protrusion .my-number .number {
		font-size: 50rpx;
		margin: 10rpx 0;
	}

	.Suspension-protrusion .my-number .Stored-value {
		width: 33.3%;
	}

	.Suspension-protrusion .my-number .Integral {
		width: 33.3%;
	}

	.Suspension-protrusion .my-number .Coupons {
		width: 33.3%;
	}

	.Of-I {
		width: 90%;
		box-sizing: border-box;
		margin: 0 auto;
		/* background-color: red; */
		margin-top: 320rpx;
		display: flex;
		height: 150rpx;
	}

	.Of-I text {
		display: block;
		font-weight: bold;
	}

	.Of-I .Of-I-left {
		width: 50%;
		text-align: center;
		background-color: #fff
		
	}
	
	.Of-I-left .evaluation{
		width: 100%;
		height: 100%;
		flex-direction: column;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.Of-I .Of-I-left .S-T-L {
		font-size: 20rpx;
		color: #c4c6c9;
		margin-bottom: 20rpx;
	}

	.Of-I .Of-I-right {
		width: 50%;
		text-align: center;
		font-size: 25rpx;
		background-color: #fff
	}
	
	.Of-I-right .comLib{
		width: 100%;
		height: 100%;
		flex-direction: column;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.recommend {
		width: 90%;
		margin: 20rpx auto;
		background-color: #fff;
		font-size: 35rpx;
		font-weight: bold;
	}
	.recommend .Carousel{
		margin-top: 20rpx;
		width: 100%;
	}
	
</style>
